// 散点图数据设置
import React from 'react';
import { Radio } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import DragContainer from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/Drag/DragContainer';
import { WD_CODE, DL_CODE } from 'src/pages/AnalyseManage/EditReport/components/EditorDataType/EnumConfig';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const ScatterDataType = ( props: IProps ) => {
	const { config, onValuesChange, form, dragOver, currentDragNode } = props;
	return (
		<>
			<FormItem label="类型" name="scatterType">
				<Radio.Group defaultValue='basic'>
					<Radio value="basic">散点</Radio>
				</Radio.Group>
			</FormItem>
			<FormItem label="X轴" name='chartScatterXColumns'>
				<DragContainer
					form={ form }
					name='chartScatterXColumns'
					tip='拖入字段'
					type='both'
					limit={1}
					config={ config }
					dragOver={ dragOver }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>

			<FormItem label="Y轴" name='chartScatterYColumns'>
				<DragContainer
					form={ form }
					name='chartScatterYColumns'
					tip='拖入字段'
					type='both'
					config={ config }
					dragOver={ dragOver }
					limit={ 1 }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>
			<FormItem label="散点名称" name='chartScatterNameColumns'>
				<DragContainer
					form={ form }
					name='chartScatterNameColumns'
					tip='拖入维度'
					type={ WD_CODE }
					config={ config }
					dragOver={ dragOver }
					limit={ 1 }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>
			<FormItem label="颜色" name='chartScatterColorColumns'>
				<DragContainer
					form={ form }
					name='chartScatterColorColumns'
					tip='拖入字段'
					type='both'
					config={ config }
					dragOver={ dragOver }
					limit={ 1 }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>
			<FormItem label="散点大小" name='chartScatterSizeColumns'>
				<DragContainer
					form={ form }
					name='chartScatterSizeColumns'
					tip='拖入度量'
					type={ DL_CODE }
					config={ config }
					dragOver={ dragOver }
					limit={ 1 }
					currentDragNode={ currentDragNode }
					onValuesChange={ onValuesChange }
				></DragContainer>
			</FormItem>
		</>
	);
};

export default React.memo( ScatterDataType );
